<script setup lang="ts">
import type { FormDesignerComponents } from "../FormComponentMixin";
import { computed, onMounted, ref } from "vue";
import GridCol from "./GridCol.vue";

const props = defineProps({
  mode: {
    type: String,
    default: "normal" //组件模式，free设计模式，normal 编辑模式, read 阅读模式，disable 禁用模式
  },
  rules: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

const _value = defineModel<any>();
const config = defineModel<FormDesignerComponents>("config");
const _active = defineModel<FormDesignerComponents>("active");
const mounted = ref(false);
const freeMode = computed(() => props.mode === "free");

const showActive = computed(() => {
  console.log(_active.value, props.config);
  return _active.value?.id === props.config.id && props.mode === "free";
});

const handleItemValueChange = (item: FormDesignerComponents, val: any) => {
  if (_value.value && Object.prototype.hasOwnProperty.call(_value.value, item.code)) {
    _value.value[item.code] = val;
  }
};

onMounted(() => {
  mounted.value = true;
});
</script>

<template>
  <div
    style="position: relative; width: 100%"
    :class="{
      'span-layout-container': freeMode,
      'w-form-cp-active': showActive,
      'w-border-no': !config.props.isContainer
    }"
  >
    <el-row :gutter="config.props.gutter" v-if="mounted">
      <template v-for="(item, i) in config.props.columns" :key="item.id">
        <GridCol
          v-model:config="config.props.columns[i]"
          v-model="_value"
          v-model:active="_active"
          :mode="mode"
          :grid="config"
          :rules="props.rules"
          @click.stop="_active = item"
          :index="i"
          :parents="config.props.columns"
          @change="handleItemValueChange"
        />
      </template>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
:deep(.span-layout-container) {
  width: 100%;
  min-height: 50px;
  background-color: $main-bgc;
}

.w-f-cp-select {
  border: 1px dashed var(--el-color-primary) !important;
  border-radius: 2px;
}
</style>
